<template>
	<view class="page">
		<image class="background-image" src="/static/image-my/Frame 9529.png" mode="scaleToFill"></image>
		<view class="container">
			<view class="header">
				<text class="title">账号注销</text>
			</view>

			<view class="content">
				<text class="description">很遗憾，启点无法继续为您提供服务，感谢您一直以来的支持。注销账号前，我们需要对以下信息进行审核，以保证您的账号安全。</text>

				<view class="notice-item">
					<text class="notice-title">(1) 自愿放弃在启点的资产和虚拟收益</text>
				</view>

				<view class="rule-item">
					<checkbox class="rule-checkbox" :checked="agreeChecked" @click="toggleAgree" />
					<view>
						<text class="rule-text">申请注销表示您愿意放弃账号内所有虚拟资产并同意《</text>
						<text class="rule-text" style="color: rgb(41, 122, 242);" @click="agreeCheckeds">启点账号注销规则</text>
						<text class="rule-text">》</text>
					</view>

				</view>
			</view>

			<button class="submit-btn" @click="handleSubmit">申请注销</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreeChecked: false
			}
		},
		methods: {
			toggleAgree() {
				this.agreeChecked = !this.agreeChecked;
			},

			agreeCheckeds() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				});
			},
			handleSubmit() {
				if (!this.agreeChecked) {
					uni.showToast({
						title: '请先同意注销规则',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认注销',
					content: '确定要提交账号注销申请吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							});
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: '您的账号已注销',
								});
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								}, 1500);
							}, 1500);
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		background-color: #f7f7f7;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		z-index: 0;
	}

	.container {
		position: absolute;

		border-radius: 16rpx;
		padding: 40rpx;

	}

	.header {
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		padding-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.content {
		margin-bottom: 60rpx;
	}

	.description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 40rpx;
		display: block;
	}

	.notice-item {
		margin-bottom: 30rpx;
	}

	.notice-title {
		font-size: 30rpx;
		color: #666;
		font-weight: 500;
	}

	.rule-item {

		display: flex;
		align-items: center;

		margin-bottom: 20rpx;
		margin-top: 40vh;
	}

	.rule-icon {
		color: #333;
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.rule-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		flex: 1;
	}

	.submit-btn {
		background-color: rgb(121, 136, 158);
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		width: 100%;

	}
</style>